<script>
export default {
  name: "AreaCommon",
  data(){
    return {
      form: {
        areaName:'',
        areaCode:'',
        area1:'',
        area2:'',
        area3:'',
      },
      first_areas:'',
      second_areas:'',
      thrid_areas:'',
    }
  },
  created() {
    this.get_first_area(); //获取一级区域菜单
  },
  methods:{
    //根据父元素id,获取下一级菜单，进入时获取一级菜单
    async get_first_area(){
      const res = await this.$http.get('areas/get_areas?pid=0');
      this.first_areas = res.data.data;
    },

    //选中一级菜单时触发，传入一级菜单的值
    async select_first_area(id){
      //清空二级菜单
      this.second_areas = '';
      this.form.area2 = '';
      //清空三级菜单
      this.thrid_areas = '';
      this.form.area3 = '';
      //请求二级菜单的数据
      const res = await this.$http.get('areas/get_areas?pid='+id);
      this.second_areas = res.data.data;
      //发送数据给父元素
      if(!id){
        this.form.areaName="";
        this.form.areaCode="";
      }
      this.sendArea2Parent();
    },

    async select_second_area(id){
      //清空三级菜单
      this.thrid_areas = '';
      this.form.area3 = '';
      //请求三级菜单的数据
      const res = await this.$http.get('areas/get_areas?pid='+id);
      this.thrid_areas = res.data.data;
      //发送数据给父元素
      this.sendArea2Parent();
      // console.log(id)
    },

    //选中三级菜单时触发
    select_third_area(id){
      const _this = this;
      this.sendArea2Parent();
      // console.log(this.form.areaName)
    },

    sendArea2Parent(){
      const _this = this;
      //1、整合所选中地址
      window.setTimeout(()=>{
        _this.get_area_info();
        //2、传输数据给父元素Dialog
        this.$emit("choosd_area",this.form.areaName,this.form.areaCode);
      },100);
    },



    //整合选中的地址信息
    get_area_info(){
      var area1_name = this.$refs.area1.selected.label;
      var area1_code = this.$refs.area1.selected.value;

      var area2_name = this.$refs.area2.selected.label;
      var area2_code = this.$refs.area2.selected.value;

      var area3_name = this.$refs.area3.selected.label;
      var area3_code = this.$refs.area3.selected.value;
      if(area1_name){
        this.form.areaName = area1_name;
        this.form.areaCode = area1_code;
      }
      if(area2_name){
        this.form.areaName = this.form.areaName + "," + area2_name;
        this.form.areaCode = this.form.areaCode + "," + area2_code;
      }
      if(area3_name){
        this.form.areaName = this.form.areaName + "," + area3_name;
        this.form.areaCode = this.form.areaCode + "," + area3_code;
      }
    },

    //清空所有区域选项
    clear_area(){
      this.form.area1 = '';
      this.second_areas = '';
      this.form.area2 = '';
      this.thrid_areas = '';
      this.form.area3 = '';
      this.form.areaName='';
      this.form.areaCode='';
    },

    //修改信息时，填充区域信息
    fill_area(area_code){
       if(area_code){
         const area_codes = area_code.split(",");
         if(area_codes[0]){
            this.form.area1 = Number(area_codes[0]);
            this.select_first_area(Number(area_codes[0]));
         }

         if(area_codes[1]){
           this.form.area2 = Number(area_codes[1]);
           this.select_second_area(Number(area_codes[1]));
         }

         if(area_codes[2]){
           this.form.area3 = Number(area_codes[2]);
         }

       }
    }
  }
}
</script>

<template>
      <el-row :gutter="10">
        <el-col :span="8" >
          <el-select ref="area1" @change="select_first_area" clearable  v-model="form.area1" placeholder="请选择" >
            <el-option  v-for="area in first_areas" :key="area.id" :label="area.name" :value="area.id"></el-option>
          </el-select>
        </el-col>

        <el-col :span="8">
          <el-select ref="area2" @change="select_second_area" clearable  v-model="form.area2" placeholder="请选择" >
            <el-option v-for="area in second_areas" :key="area.id" :label="area.name" :value="area.id"></el-option>
          </el-select>
        </el-col>

        <el-col :span="7">
          <el-select ref="area3" @change="select_third_area" clearable v-model="form.area3" placeholder="请选择" >
            <el-option v-for="area in thrid_areas"  :key="area.id" :label="area.name" :value="area.id"></el-option>
          </el-select>
        </el-col>
      </el-row>
</template>

<style scoped>

</style>